<template>
    <div class="cart">
        <!-- 头部部分 -->
        <div class="header">
            <div>
                <span><img src="../assets/image/dui.png" alt="" /></span>
                <span>100%正品保证</span>
            </div>
            <div>
                <span><img src="../assets/image/dui.png" alt="" /></span>
                <span>所有商品精挑细选</span>
            </div>
            <div>
                <span><img src="../assets/image/dui.png" alt="" /></span>
                <span>售后无忧</span>
            </div>
        </div>
        <!-- 购买数量 -->
        <div class="shopNum">
            <div>
                <span
                    >购买数量 <i>{{ shopNum }}</i></span
                >
                <span @click="admin">{{ changeTitle ? "管理" : "取消" }}</span>
            </div>
        </div>

        <!-- 购物车内容 -->
        <div class="content">
            <!-- 购物车商品条 -->
            <div class="content-item" v-for="(item, index) in catList" :key="item + index">
                <!-- <input type="checkbox" name="" id="" /> -->
                <van-checkbox :value="item.check" @click.stop="changes(item.id)" checked-color="#f00"></van-checkbox>
                <router-link tag="img" :to="`/details/${item.id}`" :src="item.imgs" alt="" />
                <ul class="uls">
                    <li>{{ item.title }}</li>
                    <li>
                        <span>￥ {{ item.price }}</span>
                        <div>
                            <button class="i" @click="ajj(item.id)" :disabled="item.count == 1" type="primary">-</button>

                            <i>{{ item.count }}</i>
                            <button class="i" @click="add(item.id)" type="primary">+</button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 底部部分 -->
        <div class="foot">
            <div class="box1" @click.stop="alls">
                <img src="../assets/image/checked.png" v-if="all" alt="" />
                <img src="../assets/image/checked-1.png" v-else alt="" />
                <span>
                    全选 <i>({{ ListNum }})</i>
                </span>
            </div>
            <div class="box2">
                <div>
                    ￥<span>{{ money }}</span>
                </div>
                <p @click="download" v-if="changeTitle">立即下单</p>
                <p v-else @click.stop="removecat">删除</p>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
    data() {
        return {
            shopNum: 0, // 购买数量
            ListNum: 0, // 全选数量
            priceNum: 0, // 下单总价格
            checks: false, // 切换 全选 / 全不选
            con: false, // 切换删除 与 立即下单
            all: true, // 全选， 全不选
            changeTitle: true,
        };
    },
    computed: {
        ...mapState(["catList"]),
        // 总价格
        money() {
            let a = 0;
            this.catList.forEach((item) => {
                if (item.check) {
                    a += item.count * item.price;
                }
            });
            return a;
        },
    },
    methods: {
        ...mapMutations(["addcat", "ajjcat", "changecat", "allcat", "noallcat", "removecay"]),
        // 管理
        admin() {
            this.changeTitle = !this.changeTitle;
        },
        // 添加一个
        add(id) {
            // console.log(123);
            this.addcat(id);
        },
        // 删除一个
        ajj(id) {
            // console.log(123);
            this.ajjcat(id);
        },
        // 单独改变选中状态改变状态
        changes(id) {
            this.changecat(id);
        },
        // 全选 / 全不选
        alls() {
            this.all = !this.all;
            if (this.all) {
                this.noallcat();
            } else {
                this.allcat();
            }
        },
        // 删除选中
        removecat() {
            this.removecay();
        },
        // 点击提交
        download() {
            if (this.catList.length < 1) {
                this.$toast("您还未选择商品");
                return;
            }
            this.catList.forEach((item) => {
                if (item.check) {
                    this.$router.push(`/orders/cat`);
                } else {
                    this.$toast("请选择商品在提交");
                }
            });
        },
    },
    created() {
        console.log(this.priceNum);
    },
};
</script>
<style lang="scss" scoped>
// 购物车
.cart {
    background-color: #f5f5f5;
    height: 100vh;
}
// 头部部分
.header {
    // width: 100%;
    height: 38px;
    padding: 0 15px;
    background-color: #f5f5f5;
    display: flex;
    justify-content: space-around;
    font-size: 12px;
    border-bottom: 0.5px solid rgba(75, 73, 73, 0.2);
    div {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;

        span:nth-child(1) {
            img {
                width: 3.5vw;
                height: 3.5vw;
            }
        }
        span:nth-child(2) {
            font-size: 2vw;
            margin-left: 1.5vw;
        }
    }
}
// 购买数量
.shopNum {
    div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 10px;
        font-size: 14px;
        background: #fff;
        span {
            i {
                color: red;
            }
            &:nth-child(2) {
                font-size: 0.26rem;
                color: #282828;
                width: 1.1rem;
                height: 0.46rem;
                line-height: 0.46rem;
                text-align: center;
                margin-right: 7px;
                padding: 0 5px;
                border-radius: 0.06rem;
                border: 1px solid #868686;
            }
        }
    }
}

// 主要内容
.content {
    .content-item {
        margin-top: 5px;
        padding: 10px 0;
        background: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        input {
            border-radius: 50%;
        }
        img {
            width: 80px;
            height: 80px;
        }
        ul {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 80px;
            li {
                width: 222px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
                font-size: 14px;

                display: flex;
                justify-content: space-between;
                div {
                    width: 100px;
                    display: flex;
                    i {
                        width: 33px;
                        text-align: center;
                        line-height: 18px;
                        border: 1px solid black;
                    }
                    button {
                        width: 33px !important;
                        background: #fff;

                        // flex: 1;
                        display: block;
                        // line-height: 20px;
                        text-align: center;
                        // width: 53px;
                        height: 20px;
                        border: 1px solid rgb(75, 73, 73);
                    }
                }
            }
        }
    }
}

// 底部下单部分
.foot {
    width: 100vw;
    height: 48px;
    display: flex;
    background: rgb(250, 250, 250);
    border-top: 1px solid rgba(75, 73, 73, 0.2);
    border-bottom: 1px solid rgba(75, 73, 73, 0.2);
    position: fixed;
    bottom: 50px;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    .box1 {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        img {
            width: 18px;
            height: 18px;
            margin: 0 10px;
        }
    }
    .box2 {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        div {
            color: red;
            margin-right: 10px;
        }
        p {
            color: #fff;
            font-size: 14px;
            width: 110px;
            height: 35px;
            border-radius: 0.5rem;
            text-align: center;
            line-height: 35px;
            margin-left: 0.22rem;
            background: red;
        }
    }
}
</style>
